<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>用户表单</title>
  <link rel="stylesheet" href="${ctx}/static/admin/layui/css/layui.css">
  <link rel="stylesheet" href="${ctx}/static/admin/css/formSelects-v4.css">
  <style type="text/css">
        .downpanel .layui-select-title span {
            line-height: 38px;
        }

        /*继承父类颜色*/
        .downpanel dl dd:hover {
            background-color: inherit;
        }
  </style>
  </head>
  <body>
    <div class="layui-card-body">
  	<form class="layui-form layui-form-pane">
	  <input name="id" type="hidden" value="${sysuser.id! }" />
	  <div class="layui-form-item">
	    <label class="layui-form-label">登陆名</label>
	    <div class="layui-input-block">
	      <input type="text" name="name" lay-verify="required" placeholder="请输入用户" autocomplete="off" class="layui-input" value="${sysuser.name! }">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">姓名</label>
	    <div class="layui-input-block">
	      <input type="text" name="username" lay-verify="required" placeholder="请输入用户" autocomplete="off" class="layui-input" value="${sysuser.username! }">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">电话</label>
	    <div class="layui-input-block">
	      <input type="text" name="phone" placeholder="请输入电话" autocomplete="off" class="layui-input" value="${sysuser.phone! }">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">邮箱</label>
	    <div class="layui-input-block">
	      <input type="text" name="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input" value="${sysuser.email! }">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">所属部门</label>
	    <div class="layui-input-block">
	        <div class="layui-unselect layui-form-select downpanel">
                <div class="layui-select-title">
                    <span class="layui-input layui-unselect" id="treeclass">选择部门</span>
                    <!--<input type="hidden" name="deptid" value="0">-->
                    <input type="hidden" name="deptids" value="">
                    <input type="hidden" name="deptnames" value="">
                    <i class="layui-edge"></i>
                </div>
                <dl class="layui-anim layui-anim-upbit">
                    <dd>
                        <ul id="classtree"></ul>
                    </dd>
                </dl>
            </div>
	    </div>
	  </div>
	  <div class="layui-form-item layui-form-text">
	    <label class="layui-form-label">备注</label>
	    <div class="layui-input-block">
	      <textarea name="des" placeholder="请输入备注" class="layui-textarea">${sysuser.des! }</textarea>
	    </div>
	  </div>
	  <div class="layui-form-item" style="display: none">
	    <div class="layui-input-block">
	      <button class="layui-btn" id="submit-btn" lay-submit>立即提交</button>
	      <button type="reset" id="reset-btn" class="layui-btn">重置</button>
	    </div>
	  </div>
	</form>
	</div>
  </body>
</html>
<script src="${ctx}/static/admin/layui/layui.js"></script>
<script src="${ctx}/static/admin/js/common.js"></script>
<script>
var $, table;
layui.use(['jquery','form','formSelects','tree'], function(){
  $ = jQuery = layui.$;
  var form = layui.form;
  var formSelects = layui.formSelects;
  var tree = layui.tree;

  if ($(':input[name="id"]').val().length > 0) {
		$(':input[name="name"]').attr('disabled','disabled');
		$('#treeclass').html('${sysuser.deptnames!}');
  }

  $.ajax({
    url:"${ctx}/sys_admin/sys/dept/getDepts",
	dataType:'json',
	success:function(result){
	   tree.render({
	     id: 'deptTree',
	     elem: '#classtree',
	     showCheckbox: true,
	     nodes: result,
         data: result,
	     oncheck: function(obj) {
             var checkData = tree.getChecked('deptTree');
             var result = getCheckedInfo(checkData);
             if (result.length > 0) {
                 $(".layui-select-title span").html(result[1]).end().find("input:hidden[name='deptids']").val(result[0]);
                 $("input:hidden[name='deptnames']").val(result[1]);
             } else {
                 $(".layui-select-title span").html('').end().find("input:hidden[name='deptids']").val('');
                 $("input:hidden[name='deptnames']").val('');
			 }
         },
	     /*click: function (node) {
	        var n = node.data;
            var $select = $($(this)[0].elem).parents(".layui-form-select");
            $select.removeClass("layui-form-selected").find(".layui-select-title span").html(n.title).end().find("input:hidden[name='deptid']").val(n.id);
         }*/
	   });
	}
  });
/*
    var inst1 = tree.render({
        elem: '#classtree'  //绑定元素
        ,data: [{
            title: '江西' //一级菜单
            ,children: [{
                title: '南昌' //二级菜单
                ,children: [{
                    title: '高新区' //三级菜单
                    //…… //以此类推，可无限层级
                }]
            }]
        },{
            title: '陕西' //一级菜单
            ,children: [{
                title: '西安' //二级菜单
            }]
        }]
    });*/

  /*tree({
      elem: "#classtree",
      nodes: [{
          name: '常用文件夹',
          id: 1,
          alias: 'changyong',
          children: [{name: '所有未读', id: 11, href: 'http://www.layui.com/', alias: 'weidu'}, {
              name: '置顶邮件',
              id: 12
          }, {name: '标签邮件', id: 13}]
      }, {
          name: '我的邮箱',
          id: 2,
          spread: true,
          children: [{
              name: 'QQ邮箱',
              id: 21,
              spread: true,
              children: [{
                  name: '收件箱',
                  id: 211,
                  children: [{name: '所有未读', id: 2111}, {name: '置顶邮件', id: 2112}, {name: '标签邮件', id: 2113}]
              }, {name: '已发出的邮件', id: 212}, {name: '垃圾邮件', id: 213}]
          }, {
              name: '阿里云邮',
              id: 22,
              children: [{name: '收件箱', id: 221}, {name: '已发出的邮件', id: 222}, {name: '垃圾邮件', id: 223}]
          }]
      }]
      ,
      click: function (node) {
          var $select = $($(this)[0].elem).parents(".layui-form-select");
          $select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.name).end().find("input:hidden[name='deptid']").val(node.id);
      }
  });*/
  $(".downpanel").on("click", ".layui-select-title", function (e) {
      $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
      $(this).parents(".downpanel").toggleClass("layui-form-selected");
      layui.stope(e);
  }).on("click", "dl i", function (e) {
      layui.stope(e);
  });
  $(document).on("click", function (e) {
      $(".layui-form-select").removeClass("layui-form-selected");
  });

  //监听提交
  form.on('submit', function(data){
	  $.post('${ctx}/sys_admin/sys/user/save', data.field, function(result) {
			if (result.success) {
				table.reload({});
				var index = parent.layer.getFrameIndex(window.name);
				parent.layer.close(index); //再执行关闭
			} else {
				layer.msg(result.msg);
			}
		}, 'json');
	  return false;
  });
});

function getCheckedInfo(jsonObj) {
	var array = [];
	var id = '';
	var name = '';
	$.each(jsonObj, function (i, dept) {
        if (dept.children.length == 0) {
            if (id != '' && name != '') {
                id += ',' + dept.id;
                name += ',' + dept.title;
            } else {
                id = dept.id;
                name = dept.title;
			}
        }
		var darray = getCheckedInfo(dept.children);
		if (darray.length > 0) {
            if (id != '' && name != '') {
                id += ',' + darray[0];
                name += ',' + darray[1];
            } else {
                id = darray[0];
                name = darray[1];
			}
		}
    });
    if (id != '' && name != '') {
        array.push(id);
        array.push(name);
    }
	return array;
}
</script>